<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <van-search v-model:query="queryStr" v-model:type="str"></van-search>
    </div>
</body>
<script src="./vue.global.js"></script>
<script>

     // 一、在自定义组件上，可以使用多个v-model（使用v-model的参数）。

    // 如：
    // 第一个v-model
    // 组件的属性：自定义名1
    // 组件的事件：update:自定义名1

    // 第二个v-model
    // 组件的属性：自定义名2
    // 组件的事件：update:自定义名2

    // 二、使用v-model
    // <组件名 v-model:自定义名1="" v-model:自定义名2="" />

    //定义组件
    const VanSearch ={
        props:["query","type"],
        emits:["update:query","update:type"],
        template:`
            <div>
                <p>{{query}}</p>
              
                <input type="text" v-bind:value="query" @input="change" />
                
            </div>
            <div>
                <p>{{type}}</p>
              
                <input type="text" v-bind:value="type" @input="changetype" />
                
            </div>
            <select v-bind:value="type" @change="changetype">
                <option>春节</option>
                <option>中秋</option>
                <option>正月十五</option>
                <option>段位</option>
                
            </select>
        `,
        methods:{
            change(e){
                this.$emit("update:query",e.target.value); 
            },
            changetype(e){
                this.$emit("update:type",e.target.value)
            }
        }
    }

    const app = Vue.createApp({
        data(){
            return{
                queryStr:"hello",
                str:'你好'
            }
        },
        components:{VanSearch},
    })
    app.mount("#app")
</script>
</html>